<template>
  <div class="goodsList">
    <el-dialog :visible="showAdd" title="编辑" @close="handleColse">
      <el-form ref="form" :model="goodsList" label-width="80px">
        <div class="one">
          <el-form-item label="编号">
            <el-input v-model="goodsList.goodsId" placeholder="请输入" style="width:81%" />
          </el-form-item>
          <el-form-item label="所属">
            <el-input v-model="goodsList.shopName " style="width:81%" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="商品名">
            <el-input v-model="goodsList.goodsName" style="width:81%" placeholder="请输入" />
          </el-form-item>
        </div>
        <div class="two">
          <el-form-item label="类型">
            <el-input v-model="goodsList.typeId" style="width:81%" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="成本价">
            <el-input v-model="goodsList.costPrice" style="width:81%" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="原价">
            <el-input v-model="goodsList.originalPprice" style="width:81%" placeholder="请输入" />
          </el-form-item>
        </div>
        <div class="three">
          <el-form-item label="售价">
            <el-input v-model="goodsList.salesPrice" style="width:81%" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="库存量">
            <el-input v-model="goodsList.stock" style="width:81%" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="月销售量">
            <el-input v-model="goodsList.monthlySales" style="width:81%" placeholder="请输入" />
          </el-form-item>
        </div>
        <div class="four">
          <el-form-item label="总销售量">
            <el-input v-model="goodsList.grossSales" style="width:81%" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="月销售额">
            <el-input v-model="goodsList.MonthlySalesVolume" style="width:81%" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="总销售额">
            <el-input v-model="goodsList.totalSales" style="width:81%" placeholder="请输入" />
          </el-form-item>
        </div>
        <div class="five">
          <el-form-item label="参与活动">
            <el-select v-model="goodsList.ParticipateActivities">
              <el-option
                v-for="item in active"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="热销">
            <el-select v-model="goodsList.SellLikeHotCakes">
              <el-option
                v-for="item in hotSell"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否推荐">
            <el-select v-model="goodsList.recommend">
              <el-option
                v-for="item in recommend"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="six">
          <el-form-item label="状态">
            <el-select v-model="goodsList.status">
              <el-option
                v-for="item in status"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否可用卷">
            <el-select v-model="goodsList.coupon">
              <el-option
                v-for="item in roll"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="临时包场">
            <el-input v-model="goodsList.temporary" style="width:81%" placeholder="请输入" />
          </el-form-item>
        </div>
        <div class="img" style="flex-direction:column;align-items:flex-start">
          <span style="margin-bottom:10px">商品图片</span>
          <el-form-item>
            <el-image
              v-model="goodsList.goodsImg"
              :src="goodsList.goodsImg"
            />
          </el-form-item>
        </div>
        <div class="direction" style="flex-direction:column;align-items:flex-start">
          <span style="margin-bottom:10px">商品描述(支持富文本编辑)</span>
          <el-form-item>
            <el-input
              v-model="goodsList.describe"
              type="textarea"
              :rows="2"
              autosize
              placeholder="请输入内容"
            />
          </el-form-item>
        </div>
        <div class="active" style="display:flex;flex-direction:column">
          <span style="font-weight:700;font-size:24px;margin-bottom:10px">商品参与的活动</span>
          <div>
            <div v-if="goodsList.ParticipateActivities==='定时秒杀'" class="kill">
              <div>
                <el-form-item>
                  参与活动
                  <el-select v-model="goodsList.ParticipateActivities">
                    <el-option
                      v-for="item in active"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  账号限购
                  <el-input v-model="goodsList.purchaseIimitation" />
                </el-form-item>
                <el-form-item>
                  秒杀价
                  <el-input v-model="goodsList.seckillPrice" />
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  秒杀时段
                  <el-time-picker v-model="job.startTime" placeholder="开始时间点" style="width:80%" />
                  <el-time-picker v-model="job.endTime" placeholder="结束时间点" style="width:80%" />
                </el-form-item>
              </div>
            </div>
            <div v-else class="promotion">
              <el-form-item>
                参与活动
                <el-select v-model="goodsList.ParticipateActivities">
                  <el-option
                    v-for="item in active"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                第一件是否优惠
                <el-select v-model="goodsList.discounts">
                  <el-option
                    v-for="item in discount"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                促销价
                <el-input v-model="goodsList.promotionPrice" />
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      <div class="btn" style="display:flex;Justify-content:center">
        <el-button type="primary" @click="btnOk">确定</el-button>
        <el-button>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editGoodsOfRow, addGoods } from '@/api/shopList'
export default {
  props: {
    rowData: {
      type: Object,
      required: true
    },
    showAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      goodsList: [], // 存放传过来的数据
      active: [{ id: 1, name: '打折促销' }, { id: 2, name: '定时秒杀' }], // 参与活动
      hotSell: [{ id: 1, name: '是' }, { id: 2, name: '否' }],
      recommend: [{ id: 1, name: '是' }, { id: 2, name: '否' }],
      status: [{ id: 1, name: '上架' }, { id: 2, name: '下架' }],
      roll: [{ id: 1, name: '是' }, { id: 2, name: '否' }],
      discount: [{ id: 1, name: '是' }, { id: 2, name: '否' }],
      job: { startTime: '', endTime: '' }
    }
  },
  created() {
    this.goodsList = this.rowData
  },
  methods: {
    handleColse() {
      this.$emit('update:showAdd', false)
    },
    async btnOk() {
      if (this.goodsList.id) {
        // 编辑
        await editGoodsOfRow({ ...this.goodsList, seckilltime: [this.job.startTime, this.job.endTime] })
        this.$message.success('修改资料成功')
        this.$emit('update:showAdd', false)
      } else {
        // 新增
        await addGoods({ ...this.goodsList, seckilltime: [this.job.startTime, this.job.endTime] })
        this.$message.success('新增商品成功')
        this.$emit('addOk', false)
      }
    }
  }
}
</script>

<style  lang="less" scoped>
.goodsList{
  .el-dialog{
    .el-form{
      div{
        display: flex;
        justify-content: space-around;
      }
    }
  }
}
/deep/.el-form-item{
  .el-form-item__label{
    width: 120px!important;
  }
  .el-form-item__content{
  margin-left: 0px!important;
  }
}
.kill{
  display: flex;
  flex-direction: column;
  div{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
